<template>
    <div id="solutionDetails">
        <Header></Header>
        <div id="PageDescription" :style="background">
          <div class="title">
            <div>{{ c_word }}</div>
            <div style="font-size: 20px">{{e_word}}</div><br>
            <div><el-button @click="setTab">服务咨询</el-button></div>
          </div>

        </div>
<!--        <button @click="test01()">123</button>-->
        <div style="width:100%;height: auto">
          <!--   中间导航   -->
          <div class="subMenu smint" style="position: relative; top: 0px; left: 0px;">
            <div class="container">
              <div class="h-menu" style="display: flex;justify-content: center">
                  <a class="subNavBtn" style="width: 12.5%;" href="#s10" id="s10"></a>
                  <a class="subNavBtn" style="width: 12.5%;" href="#s10" id="s11"></a>
                <a class="subNavBtn active" style="width: 12.5%;" href="#description" id="s1">方案描述</a>
                  <a class="subNavBtn" style="width: 12.5%;" href="#video" id="s2">相关视频</a>
                  <a class="subNavBtn" style="width: 12.5%;" href="#architecture" id="s3">技术架构</a>
<!--                  <a class="subNavBtn" style="width: 12.5%;" href="#s4" id="s4">业务架构</a>-->

<!--                <a class="subNavBtn" style="width: 12.5%;" href="#s4" id="s4">业务场景</a>-->
<!--                <a class="subNavBtn" style="width: 12.5%;" href="#s5" id="s5">快速选配套餐</a>-->
<!--                <a class="subNavBtn" style="width: 12.5%;" href="#s6" id="s6">方案优势</a>-->
<!--                <a class="subNavBtn" style="width: 12.5%;" href="#s7" id="s7">客户案例</a>-->
<!--                <a class="subNavBtn" style="width: 12.5%;" href="#s8" id="s8">合作伙伴</a>-->
                <a class="subNavBtn" style="width: 12.5%;" href="#contactUs" id="s5">联系我们</a>
                <a class="subNavBtn" style="width: 12.5%;" href="#s55" id="s51"></a>
                <a class="subNavBtn" style="width: 12.5%;" href="#s55" id="s52"></a>
              </div>
            </div>
          </div>
        <a id="description">
          <div class="solution_bt">
            <h1>方案描述</h1>
            <h6 style="color: #888888">Scheme description</h6>
            <div class="solution-des" style="width: 1200px;color: #888888">
              在线监测系统为企业提供包括GIS地图监测、数据监测、警情处理、视频监控、即时通讯、设备管理、报表统计、人员权限管理、智能移动终端等模块，为企业打造一个安全生产在线监测信息化平台，主要为企业解决了以下问题：
              <ul class="solution-ul" style="padding-left: 15px;">
                <li style="list-style-type: disc;">解决企业安全工作点多、面广、复杂繁重而又人少、效率低的问题。</li>
                <li style="list-style-type: disc;">解决企业员工安全意识淡薄，缺乏自我防护意识，对企业危险源危害认识不足，出现警情采取措施不及时，不正确的问题。</li>
                <li style="list-style-type: disc;">解决各个车间、各个监测设备单独作业，无法集现场监控、参数监测、厂区平面图于一体，实现集中监测、联动管理，即时、直观、形象监测预警的问题。</li>
                <li style="list-style-type: disc;">解决为安全生产相关部门提供实时数据、实时视频和报警服务，对企业的突发事故进行现场处置和综合协调的问题。</li>
                <li style="list-style-type: disc;">解决企业报警数据的收集、存储和管理，提供历史报警记录检索机制的问题。</li>
                <li style="list-style-type: disc;">解决安全生产管理人员在控制室与现场间来回跑动，无法实现远程查看现场数据的问题。</li>
                <li style="list-style-type: disc;">解决实现系统自动对已发生事故信息进行统计，通过查询界面可以看到历史报警信息，为管理者加强安全生产管理提供依据。</li>
              </ul>
            </div>
          </div>
        </a>
            <a id="video">
            <div class="solution_bt">
              <h1>相关视频</h1>
              <h6 style="color: #888888">Scheme video</h6>
              <div class="solution-des" style="width: 1200px;height: 500px;">
               <video width="1200px" height="500px" controls>
                 <source src="" type="video/mp4">
               </video>
              </div>
            </div>
        </a>
        <a id="architecture">
          <div class="solution_bt">
            <h1>技术架构</h1>
            <h6 style="color: #888888">Scheme Technology Architecture</h6>
            <div class="solution-des" style="width: 1200px;color: #888888" >
              <img style="margin: 0px auto; display: block;" src="@/assets/image/solutionDetails/20181115170619867.png">
              <div style="line-height: 28px;">
                数据层：主要负责整个系统的数据采集以及存储，主要来源为现场设备采集 <br>
                数据、国家发布数据、业务往来的数据等，为平台和应用形成强大的数据支撑。<br>
                平台层：平台层分为IaaS层和PaaS层。IaaS层对外提供标准的符合OpenStack规范要求的REST API。对内在功能性、可靠性、安全性、支撑工具等方面全面优化开源 OpenStack，全面接入OpenStack各领域核心组件，提供完善的云基础设施服务能力，涵盖计算、存储、网络、安全等 IaaS服务，根据客户需求能够支持公有云、私有云和混合云三种不同应用模式。PaaS层：提供云计算、大数据、应用开发、中间件、人工智能、区块链等基础PaaS服务能力。通过浪潮企业大脑产品，面向各个行业和领域，提供以数据为核心的工业数据服务、机理模型服务和业务微服务，此外还提供了面向工业设备连接的物联网服务、云化软件和APP开发服务及基于区块链技术构建的云资源管理库。
                <br>
                应用层：通过平台的搭建，主要面向石油、化工、冶金等不同行业的不同业务流程，提供GIS定位、数据监测、警情处理、设备管理等相关的应用，为相关人员随时随地关注安全状况和污染情况，对企业全方面的有效管理。
              </div>
            </div>
          </div>
         </a>
          <div>

<!--            <div class="container">-->
<!--              <div class="solution_bt">-->
<!--                <h1 style="color: rgb(97, 145, 221);">方案业务场景</h1>-->
<!--                <h6 style="color: rgb(70, 106, 170);">Scenario business scenario</h6>-->
<!--              </div>-->
<!--              <div class="row solution-des" style="padding: 15px; box-shadow: 0px 0px 35px rgba(0,204,255,0.2); background-color: rgb(28, 43, 86);width: 1200px">-->
<!--                <div class="left-tab">-->
<!--                  <ul class="serviceTab">-->
<!--                    <li id="list1" @click="setTab('list',1,9)" class="hover">1GIS地图监测</li>-->
<!--                    <li id="list2" @click="setTab('list',2,9)" class="">数据监测</li>-->
<!--                    <li id="list3" @click="setTab('list',3,9)" class="">警情处理</li>-->
<!--                    <li id="list4" @click="setTab('list',4,9)" class="">视频监控</li>-->
<!--                    <li id="list5" @click="setTab('list',5,9)" class="">即时通讯</li>-->
<!--                    <li id="list6" @click="setTab('list',6,9)" class="">设备管理</li>-->
<!--                    <li id="list7" @click="setTab('list',7,9)" class="">报表统计</li>-->
<!--                    <li id="list8" @click="setTab('list',8,9)" class="">人员权限管理</li>-->
<!--                    <li id="list9" @click="setTab('list',9,9)" class="">智能移动终端</li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--                <div class="service_con" id="con_list_1" style="display: block;;">-->
<!--                  <ul class="solution-ul">-->
<!--                    <li>-->
<!--                      GIS监测模块是以GIS方式展示厂区及各个设备的实时数据，主要包括：从数据库表中读取并展示厂区、车间、探测设备等定位信息，接收并展示采集器传回的各个探测器的实时数据，网络状态，报警信息等，同时能够自动智能判断各级报警，不同故障状态，并通过抖屏，发光，声音等报警效果及时提醒用户。-->
<!--                      <br>-->
<!--                      GIS定位：厂区、车间、探测设备定位。<br>-->
<!--                      网络监测：实时监测整个网络状态，一旦发生故障即时报警。<br>-->
<!--                      智能预警：根据实时数据、预设报警条件，智能分析判断 网络故障、通讯超时、数据异常等各种报警。<br>-->
<!--                      警情处理：自动定位报警点，并按预定报警等级和种类发出颜色变换、声光、闪屏等报警提示，同时根据预警预案向预定目标发出警情短信，警情广播。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding-top: 10px;" border="0" src="@/assets/image/solutionDetails/20181109153259994.png">-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--                <div class="service_con" id="con_list_2" style="display: none;">-->
<!--                  <ul class="solution-ul">-->
<!--                    <li>-->
<!--                      通过数据监测功能，在系统中实时、直观的监控厂区中所有数据的状态，当设备发生故障、报警时，系统配备的短信或者手机客户端发送给责任人进行处理，有效实现了设备监控自动化。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px;" border="0" src="@/assets/image/solutionDetails/20181109153428821.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      列表上部显示监测设备总数、正常设备数量、故障设备数量、报警设备数量以及未连接设备数量，下方列表展示设备的详细信息，包括当前状态、通道描述、探测介质、监控区域，并以不同颜色区分不同的状态。-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--                <div class="service_con" id="con_list_3" style="display: none;">-->
<!--                  <ul class="solution-ul">-->
<!--                    <li>-->
<!--                      警情处理主要是对设备报警记录的查询，能够根据报警时间、企业、车间、监控设备等条件查询出报警记录，可以按照列表模式、曲线模式展示，并支持报警导出功能，监控人员通过各种展现方式监控警情的同时，可通过观察报警曲线，发现报警规律，有效预测、预防安全事故的发生。-->
<!--                      <br>-->
<!--                      当发生报警时，系统支持手短信通知、即时通讯、手机客户端通讯三种方式进行报警的通知，以确保现场监控人员能第一时间发现报警并通知人员进行处理。-->
<!--                      <br>-->
<!--                      列表模式-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px; width: 60%;" border="0" src="@/assets/image/solutionDetails/20181109153605241.png">-->
<!--                    </li>-->
<!--                    <li>曲线模式</li>-->
<!--                    <li>-->
<!--                      <img style="width: 60%; padding-top: 10px;" border="0" src="@/assets/image/solutionDetails/20181109153656422.png">-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--                <div class="service_con" id="con_list_4" style="display: none;">-->
<!--                  <ul class="solution-ul">-->
<!--                    <li>-->
<!--                      视频主要进行监控车间实时视频的监控、维护，监控现场实时运行状况。<br>-->
<!--                      当车间内设备出现故障或报警时，安全监控人员，可先查看现场设备报警关联的联动视频，在确认现场无危险后，再进入现场进行故障或报警的处理，有效促进了企业安全生产，降低了企业发生安全事故的风险。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="width: 60%; padding-top: 10px;" border="0" src="@/assets/image/solutionDetails/20181109153812499.jpg">-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--                <div class="service_con" id="con_list_5" style="display: none;">-->
<!--                  <ul class="solution-ul">-->
<!--                    <li>-->
<!--                      主要用于系统值守人员相互通讯沟通，类似于聊天室，支持群发和单独发送信息；通过即时通讯功能，接入系统中的用户可在线实时发送、接收信息，沟通更加方便、快捷。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="width: 60%; padding-top: 10px;" border="0" src="@/assets/image/solutionDetails/20181109153935614.png">-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--                <div class="service_con" id="con_list_6" style="display: none;">-->
<!--                  <ul class="solution-ul">-->
<!--                    <li>-->
<!--                      探测设备管理 <br>-->
<!--                      主要管理监测温湿度、压力、流量、浓度等重大危险源的硬件设备。<br>-->
<!--                      包括探测设备新增、编辑、批量新增、批量编辑以及短信分级预警设置、报警阀值设置、联动视频设置等功能。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px; width: 60%;" border="0" src="@/assets/image/solutionDetails/20181109154119690.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      短信分级预警 <br>-->
<!--                      短信分级预警进行报警预案设置，具体流程为：根据设备的报警级别（超高报、高报、低报、预警、故障）分别设置相应的报警责任人（可重复多选），发生警情时，根据报警级别向相应的责任人发送报警短信。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px;" border="0" src="@/assets/image/solutionDetails/20181109154235895.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      报警阀值设置 <br>-->
<!--                      报警阀值管理主要是对设备报警阀值进行批量和单独设置，可对超高报，高报，低报、预警共4类报警阀值进行设置，对设备设置报警阀值后，系统报警将以报警阀值设置的为准，如果设备所设报警等级的阀值为零，则系统仅使用设备返回的报警等级。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px;" border="0" src="@/assets/image/solutionDetails/20181109154357906.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      联动视频设置 <br>-->
<!--                      联动视频设置用于绑定设备和视频，绑定完成后，当有警情发生时，可在“实时报警信息”中，点击“查看联动视频”即可打开出现报警设备关联的“联动视频”进行监控。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px;" border="0" src="@/assets/image/solutionDetails/20181109154507880.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      监控视频管理 <br>-->
<!--                      对监控视频进行新增、编辑、删除等维护操作。<br>-->
<!--                      通信链路管理 <br>-->
<!--                      对通信链路信息进行新增、编辑、删除等维护操作。-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--                <div class="service_con" id="con_list_7" style="display: none;">-->
<!--                  <ul class="solution-ul">-->
<!--                    <li>-->
<!--                      报表模块主要是对各个车间，各个设备各种报警状态和故障的统计以及各个车间，各种仪表，各个时段以及单个车间中不同报警状态之间进行对比，并生成各种统计对比图形，如：树状图，曲线图，罗盘图，饼图等。-->
<!--                      <br>-->
<!--                      其中报表模块主界面包括按车间、按设备进行统计分析；单个车间或设备能够按时段统计各个报警状态进行统计发分析；各个时段又能够查询该车间或设备在选择时段的原始实时数据。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px; width: 60%;" border="0" src="@/assets/image/solutionDetails/20181109154718237.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      如图，上部两行为查询区，能够查询指定时间端内，按车间或设备分别进行统计分析；中部为操作区，第一行为查询按钮，第二行为各种图形分析按钮以及分时统计按钮，该行内的所有按钮均以弹出窗口方式显示相应的数据或图形（如图中即点击树状图弹出树状图分析图形窗口）；下部为主显示区，用列表形式显示查询的数据。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="width: 60%; padding-top: 10px;" border="0" src="@/assets/image/solutionDetails/20181109154832497.png">-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--                <div class="service_con" id="con_list_8" style="display: none;">-->
<!--                  <ul class="solution-ul">-->
<!--                    <li>-->
<!--                      系统用户实现分角色进行管理，基本角色包含两种，“普通用户”和“管理员”；在登陆界面以用户名密码登陆或者以指纹验证的方式登陆系统后，系统会自动判断登陆用户的权限。“普通用户”除对企业厂区进行日常巡检的同时，可对车间的设备及报警进行实时监测、报警通知、警情处理、综合查询、视频监控，具体权限包括：厂区监测、数据监测、警情处理、历史查询、即时通讯、视频监控；-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px; width: 60%;" border="0" src="@/assets/image/solutionDetails/20181109154954398.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      “管理员用户”除具有普通用户的权限外，可对系统用户信息（用户权限分配、密码重置等）、设备信息（监控设备、监控视频、通信链路等）、企业信息（车间、安全员等）、系统信息(系统日志、图片信息、探测介质等)进行配置和管理。-->
<!--                      <br>-->
<!--                      企业管理 <br>-->
<!--                      企业管理主要对企业信息进行综合管理，包括企业下的子公司的新增、编辑、删除及企业厂区图设置。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px;" border="0" src="@/assets/image/solutionDetails/20181109155117196.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      车间管理 <br>-->
<!--                      车间管理主要对车间信息进行维护，并可设置车间区域图。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px;" border="0" src="@/assets/image/solutionDetails/20181109155219375.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      安全员管理 <br>-->
<!--                      安全员管理主要对安全员信息进行维护，并可对安全员负责区域进行设置。-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding: 10px 0px;" border="0" src="@/assets/image/solutionDetails/20181109155327332.png">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      系统管理 <br>-->
<!--                      系统管理主要是对系统配置信息进行维护，包括日志查询、图片管理、探测介质管理。-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--                <div class="service_con" id="con_list_9" style="display: none;">-->
<!--                  <ul class="solution-ul">-->
<!--                    <li>-->
<!--                      系统支持智能手机登录访问，可方便用户随时随地掌握厂区各个生产车间的各类危险源的状态-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <img style="padding-top: 10px;" border="0" src="@/assets/image/solutionDetails/20181109155910400.png">-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
              <a id="contactUs">
              <div class="solution_bt">
                  <h1>联系我们</h1>
                  <h6 style="color: #888888">contact us</h6>
                  <div class="solution-des" style="width: 1200px;color: rgb(136, 136, 136);">
                      <ul class="solution-ul" style="padding-left: 15px;font-size:18px;font: 18px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;">
                          <li style="list-style-type: disc;margin-bottom: 8px"><span style="width: 60px;">单位：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>山东计算中心</li>
                          <li style="list-style-type: disc;margin-bottom: 8px"><span style="width: 60px">电话：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>16352954523</li>
                          <li style="list-style-type: disc;margin-bottom: 8px"><span style="width: 60px">邮箱：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>153262@163.com</li>
                          <li style="list-style-type: disc;margin-bottom: 8px"><span style="width: 60px">创建人：&nbsp;&nbsp;&nbsp;&nbsp;</span>999</li>
                          <li style="list-style-type: disc;margin-bottom: 8px"><span style="width: 60px">创建时间：</span>2021-07-13</li>
                      </ul>
                  </div>
              </div>
             </a>
          </div>


        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from "@/components/content/header/Header";
    import PageDescription from "@/components/content/pageDescription/PageDescription";
    import Footer from "@/components/content/footer/Footer";
    export default {
        name: "solutionDetails",
        components:{
            Header,
            PageDescription,
            Footer
        },
        data(){
            return{
                url:require("@/assets/image/aboutPlatform/about.png"),
                c_word:'XXX解决方案',
                e_word:'本方案适用于石油、化工、冶金等大中型危化企业',
                btnFlag:true
            }
        },
        methods: {
          setTab(name,cursel,n){
            for(let i=1;i<=n;i++){
              var menu=document.getElementById(name+i);
              var con=document.getElementById("con_"+name+"_"+i);
              menu.className=i==cursel?"hover":"";
              con.style.display=i==cursel?"block":"none";
            }
          },
          test01(){
            console.log(123456789)
          }
        },
        computed:{
          background:function(){
            return {
              height: "346px",
              backgroundImage:"url("+this.url+")",
              backgroundColor:'rgba(1, 84, 120, .5)',
              backgroundRepeat:'no-repeat',
              backgroundSize:"100% 346px",
              backgroundBlendMode: 'multiply',
            }
          }
        },

    }
</script>

<style scoped>
.title{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #FFFFFF;
  font-size: 32px;
  padding-top: 85px;
  padding-left: 200px;
}
 .subMenu {
  height: 80px;
  z-index: 900;
  width: 100%;
  background: #1f315f;
  /* border-bottom: 1px solid #eee; */
}
.subMenu .h-menu {
  position: relative;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  width: 100%;
}
 .subNavBtn:nth-child(even) {
  background: #26396b;
}
 .subNavBtn {
  display: block;
  height: 80px;
  float: left;
  text-decoration: none;
  font-size: 16px;
  line-height: 80px;
  text-align: center;
  color: #fff;
  width: 20%;
}
h-menu {
  position: relative;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  width: 100%;
}
.solution_bt h1 {
  color: #403d56;
  font-size: 30px;
  font-weight: normal;
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}
.solution_bt {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}
.solution-des {
  margin: 0 auto;
  box-shadow: 0 0 35px rgb(180 180 180 / 50%);
  padding: 30px;
  background-color: #fdfdfd;
  line-height: 28px;
  text-align: left;
  margin-top: 30px;
}
.solution-ul {
  line-height: 28px;
}
/*tab切换标题区域*/
.left-tab{
  text-align: center;
}
.left-tab li {
  border: 1px solid #3754a2; border-bottom: 0; background: #2c4381; transition: all 0.8s; cursor: pointer; cursor: hand;
  padding: 0 18px; color: #698acd; font-size: 14px; line-height: 52px; cursor: pointer; display: inline-block;
}
.left-tab li:hover,.left-tab li.hover {
  border: 1px solid rgba(107,189,242,0.5); border-bottom: 0;
  background: rgba(97,176,227,0.5);
  color: #c2e7ff;
}
/*tab切换内容区域*/
.service_con{
  color: #698acd; padding: 20px; border-top: 1px solid #3754a2; background: rgba(44,67,129,0.5);min-height: 267px;
}

</style>
